import { Route, Switch } from "react-router-dom";

import Home from "./views/Home";
import About from "./views/About";
import Contact from "./views/Contact";

export default function App() {
  return (
    <div>
      <h1>App</h1>

      <hr />

      <Switch>
        <Route path="/home" component={Home} />

        <Route
          path="/about"
          render={(props) => {
            // 返回一段JSX
            //    如果需要 About 组件接收到路由相关的三个prop, 则需要将 该 render 的 prop 给透传下去
            return <About {...props} />;
          }}
        />

        <Route path="/contact">
          <Contact />

          {/* 如果需要 Contact 组件接收到路由相关的Props, 则需要
              将 children 写成 render 形式 */}

          {/* {(props) => <Contact {...props} />} */}
        </Route>
      </Switch>
    </div>
  );
}
